<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第三天 数据驱动视图</title>
</head>
<body>
	<div id='app'>
		
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		Vue.component('MyLi',{
			template:`
				<li>
					预留第一个坑
					<slot name='two'></slot>
					预留第二个坑
					<slot name='three'></slot>
				</li>	
			`
		})

		let App = {
			template:`
				<div>
					<ul>
						<MyLi>
							<h2 slot='two'>我是第一个坑</h2>
							<h2 slot='three'>我是第二个坑</h2>

							<h2 slot='three'>我是第一个坑</h2>
							<h2 slot='two'>我是第二个坑</h2>
						</MyLi>
					</ul>
				</div>
			`
		}

		new Vue({
			el:'#app',
			components:{
				App
			},
			template:`<App/>`
		})
	</script>
</body>
</html>
